<template>
  <div>
    <cus-search title="角色管理" class="mb_20">
      <cus-search-item style="justify-content: space-between">
        <Form :model="form" :label-width="80" :label-colon="true">
          <FormItem label="角色名称" class="mr_20 mb_20" :label-width="80">
            <Input v-model.trim="form.name" clearable style="width: 200px" maxlength="20"></Input>
          </FormItem>
        </Form>
        <div style="display: flex">
          <Button class="mr_10" type="primary" v-permission="10" @click="() => {
            this.pages.page = 1;
            this.onInit();
          }
          ">查询</Button>
          <Button class="mr_10" type="default" v-permission="10" @click="() => {
            this.onReset();
          }
          ">重置</Button>
        </div>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">
      <cus-card :showTitle="false" class="mt_20" style="padding: 20px 20px">
        <Button class="mr_10 mb_20" type="primary" v-permission="20" style="margin-left: auto; display: block;" @click="() => {
            this.pages.page = 1;
            this.onEdit();
          }
          ">添加</Button>
        <cusTable border :loading="form.loading" :columns="columns" :data="formData" :bottomClass="['cus-page']"
          :size="vuex_config.tableSize">
          <template slot-scope="{ row, index }" slot="gmtCreate">
            {{ row.gmtCreate | formatTime("yyyy-MM-dd hh-mm-ss") }}
          </template>
          <template slot-scope="{ row }" slot="operation">
            <div class="flex" style="justify-content: space-around">
              <Button type="primary" v-permission="30" size="small" @click="onEdit(row)">
                编辑
              </Button>
              <Button v-if="row.isAdmin == 0" type="error" size="small" v-permission="40" @click="onDelete(row)">
                删除
              </Button>
            </div>
          </template>
        </cusTable>
        <div style="width: 100%; display: flex; justify-content: flex-end">
          <cus-page :data="pages" class="mt_20" @pageChange="getRoleListApi"></cus-page>
        </div>
      </cus-card>
    </div>
    <roleModal ref="roleModal"></roleModal>
  </div>
</template>
<script>
import { getRoleList, deleteRole } from "@/api/organ/system";
import roleModal from "./components/roleModal";
export default {
  components: { roleModal },
  name: "userManage",
  data() {
    return {
      mode: 1,
      form: {
        loading: false,
        name: "", // 用户名
        loginName: "", //账号
        phoneNumber: "", //手机号
      },
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      formData: [],
      tableHeight: 0,
      columns: [
        {
          title: "序号",
          width: 70,
          key: "name",
          type: "index",
          align: "center",
        },
        {
          title: "角色名称",
          Width: 120,
          key: "name",
          align: "center",
        },
        {
          title: "角色描述",
          Width: 120,
          key: "descr",
          align: "center",
        },
        {
          title: "创建时间",
          minWidth: 120,
          key: "gmtCreate",
          align: "center",
        },
        {
          title: "操作",
          width: 170,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      data: [],
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0,
      },
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.getRoleListApi();
      setTimeout(() => {

        this.tableHeight = window.innerHeight - 373; // 表格自适应高度
      }, 100);
      window.addEventListener("resize", this.tableHeightChange, true);
    },
    // 表格高度变化
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 410; // 表格自适应高度

      }, 100);
    },
    // 重置
    onReset() {
      this.form.loginName = "";
      this.form.phoneNumber = "";
      this.form.name = "";
      this.pages.page = 1
      this.onInit();
    },
    // 删除
    onDelete(row) {
      this.$cu.dialog({ params: row }).then(({ id }) => {
        this.$cu.showLoading();
        this.deleteRoleApi(id);
      });
    },
    // 添加角色
    onEdit(row) {
      if (row) {
        this.$refs["roleModal"].form.id = row.id;
      }
      this.$refs["roleModal"].show();
    },
    // 查询角色列表
    getRoleListApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        getRoleList({
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
          name: this.form.name,
        }).then((res) => {
          if (res.code === 1) {
            this.pages.pageTotal = res.data.total;
            this.formData = res.data.list;
            resolve();
            this.form.loading = false;
          }
        });
      });
    },
    // 删除角色
    deleteRoleApi(id) {
      return new Promise((resolve) => {
        deleteRole({ id })
          .then((res) => {
            if (res.code === 1) {
              this.$cu.hideLoading();
              this.$Message.success("删除成功");
              if  (this.formData.length == 1 && this.pages.page > 1) this.pages.page--
              this.getRoleListApi();
              resolve();
            } else this.$cu.hideLoading(1.5);
          })
          .catch(() => this.$cu.hideLoading(1.5));
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.button-box {
  float: right;
}
</style>